<template>
<!--商品图片购买加入购物车按钮-->
    <div class="goodsInfo">
        <div class="left">
            <PicImg></PicImg>
        </div>
        <div class="right">
            <div class="title">
                艺福堂 蒲公英根金银花杭白菊花茶140g凉茶枸杞甘草枣片 黄谷丁根古古丁养生茶泡水喝的五宝茶
            </div>

            <div class="price">
                <span class="price-title">价格：</span><span class="price-num">￥42.00</span>
            </div>

            <div class="shoppingNum">
                <div class="shoppingTitle">数量：</div>
                <div class="num"><el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number></div>
                <div class="stock">库存:100</div>
            </div>

            <div style="margin-top:10px">
            <tr>
                        <td align="left" style="vertical-align:top">送&nbsp;&nbsp;&nbsp;货&nbsp;：</td>
                        <td>由本平台从 全国最近点 发货，并提供售后服务。如有问题咨询在线客服~!<br>上午08:30前完成下单下午送达,下午下单隔日第二天送达.</td>
                    </tr>
            </div>

            <div class="shop">
                <el-button type="danger">立即购买</el-button>
                <el-button type="primary">加入购物车</el-button>
            </div>

        </div>
    </div>
</template>

<script>
import PicImg from './picImg'
export default {
    name:'goodsInfo',
    components:{
        PicImg
    },
    data(){
        return{
            num:1
        }
    },
    methods:{
        handleChange(value){
            console.log(value)
        }
    }
}
</script>

<style lang="scss" scoped>
.goodsInfo{
    max-height: 520px;
    width: 1200px;
    margin: 0 auto;
    display: flex;
    margin-bottom: 30px;
}
.left{
    width: 397px;
    height: 490px;
}
.right{
    width: 720px;
    margin-left:80px ;
}
.title{
    font-size: 17px;
    line-height: 25px;
    width: 520px;
    font-weight: 400;
    color: #000;
    font-weight: bold;
    padding: 10px 1px 10px;
    text-overflow: ellipsis;
    overflow: hidden;
}
.price{
    height: 50px;
    background: #f7f7f7;
    display: flex;
    flex-wrap: wrap;
    .price-title{
        font-size: 12px;
        height: 50px;
        width: 80px;
        line-height: 50px;
        margin-left: 20px;
    }
    .price-num{
        font-size: 25px;
        color: crimson;
        width: 100px;
        height: 50px;
        line-height: 50px;
    }
}
.shoppingNum{
    display: flex;
    flex-wrap: wrap;
    height: 40px;
    line-height: 40px;
    margin-top: 20px;
    .shoppingTitle{
        width: 50px;
    }
    .num{
        width: 200px;
    }
    .stock{
        width: 100px;
    }
}
.shop{
    width:100%;
    margin-top:10px ;
    button{
        width: 100%;
        display: block;
        margin: 15px 0;
    }
}
</style>